<!-- 基础页面外壳 -->

<!-- 属性 -->
<!-- 配置名称 | 类型 | 用途 | 返回值 | 默认值 | 必填 | 说明 -->
<!-- searchbar | Boolean | 是否带searchbar | - | false | - | - -->

<!-- 事件 -->
<!-- 无 -->

<!-- 插槽 -->
<!--
  #title: 页面标题
  #toolbar: 页面全局操作
  #searchbar: 页面筛选内容（需要type为search时可用）
  #default: 页面内容
-->
<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  searchbar?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  searchbar: false
})

console.log(props.searchbar)

const bindHeaderHight = ref('65px')
</script>

<template>
  <div class="base-page-wrapper">
    <div v-if="$slots.searchbar" class="base-page-up">
      <slot name="searchbar"></slot>
    </div>
    <div class="base-page-down">
      <div class="base-page-header">
        <div class="base-page-title">
          <div class="base-page-title-icon"></div>
          <div class="base-page-title-content">
            <slot name="title"></slot>
          </div>
        </div>
        <div class="base-page-toolbar">
          <slot name="toolbar"></slot>
        </div>
      </div>
      <div class="base-page-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.base-page-wrapper {
  @include rect(100%, 100%);
  display: flex;
  flex-direction: column;
  .base-page-up {
    @include rect(100%, auto);
    padding: 24px;
    padding-bottom: 6px;
    box-sizing: border-box;
    background-color: var(--white-color);
    margin-bottom: 24px;
  }
  .base-page-down {
    @include rect(100%, 100%);
    padding: 0 24px;
    box-sizing: border-box;
    background-color: var(--white-color);
    overflow: auto;
    .base-page-header {
      @include rect(100%, v-bind(bindHeaderHight));
      @include flex(row, space-between, center);
      .base-page-title {
        @include flex(row, flex-start, center);
        .base-page-title-icon {
          @include rect(3px, 16px);
          background-color: var(--theme-color);
        }
        .base-page-title-content {
          font-family: 'PingFangSC-Bold';
          font-size: 18px;
          font-weight: bold;
          color: var(--black-color);
          line-height: 21px;
          margin-left: 8px;
        }
      }
      .base-page-toolbar {
        @include flex(row, flex-end, center);
      }
    }
    .base-page-body {
      @include rect(100%, calc(100% - v-bind(bindHeaderHight)));
    }
  }
}
</style>
